<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>FarmaSoft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>
 <script type="text/javascript">
 
 $(document).ready(function(){
 	$("#dialogo").dialog({
		autoOpen: false,
        title: "Formulario Localidad",
		height: 250,
		width: 550,
		modal: true,
		buttons: {
        	"Aceptar": function() {
            	var flag = $("#formLocality").valid();
                if(flag){
                	$.ajax({
                    	type: 'POST',
                        url: 'AjaxAdministrationAdminLocalityNewEdit',
                        data: $('#formLocality').serialize(),
                        success: function(res){
                        	location.href = "adminLocality?_menuId=2&_subMenuId=2&_optionId=3";
                        },
                        error:function(){alert("Error! al registrar la localidad")}
                    });
                    $( this ).dialog( "close" );
                 }
              },
              Cancelar: function() {
              	$( this ).dialog( "close" );
              }
		},
		close: function() {}
	});
 	
 	//list of country, region and locality
 	send=0;	
    $("#idCountry").change(function(){
    	if($(this).val() != ''){
        	$("#idCountry").toggleClass("error",false);
	        $("#idCountry option:selected").each(function (){
	        	var idCountry = $(this).val();
	        	var idRegion=$(this).val;
	            $.ajax({ 
	           		url: 'AjaxAdministrationAdminLocality',
	           	   	dataType: "json",
	        		type: "GET",
	           	    data: ({idCountry :idCountry}),
	           	    success:function(data)	{
	           	    	var html = '<option value="">Seleccione</option>';
	           	      	if(data[0].name != ''){
		                	for(var i=0; i<data.length; i++){
		        	      		var obj = data[i];
		           	       		html += '<option value="'+obj.regionId+'">'+ obj.name + '</option>';
		           	       	}
		           	    }
	       	   			$('#idRegion').html(html);
	           		        	
	           		}, 
	           		error: 	function(){alert('Error en request..');} }); 
	        });
      	}else{
            $("#idCountry").toggleClass("error",true);
           	$("#idRegion").toggleClass("error",true);
            $('#'+$("#idRegion").id+'> option[value=""]').attr('selected', 'selected');
        }
    });
            
    $("#idRegion").change(function(){
    	if($(this).val() != '')
        $("#idRegion").toggleClass("error",false);
    });
 	
	// boton addLocality
    $.fn.addLocality = function(idPais, idCiudad,idLocalidad,nombre,sigla,zona){
		
		$("#idCountry").prop("readonly",false);
		$("#idRegion").prop('readonly', false);
    	
		$('#formLocality').each(function(){
        	this.reset();
        });
                    
        $("#idPaisSel option:selected").each(function (){
        	$("#idPais").val($(this).val());
            $("#nombrePais").val($(this).text());
        });
                    
        $("#titleForm").text("Nueva Localidad");
        $("#accion").val("0");
        $("#dialog:ui-dialog" ).dialog( "destroy" );
        $("#dialogo" ).dialog( "open" );
        $("#nombre").focus();
    }  
	
    // funcion que modifica un Localidad
    $.fn.editar = function(idPais, idCiudad,idLocalidad,nombre,sigla,zona){
    	$("#titleForm").text("Modificar Localidad "); // muestra sus Ids
        $('#formLocality').each(function(){
        	this.reset();
        });
        //Select one Country
        $("#idCountry option:selected").each(function (){
        	$("#idPais").val($(this).val());
            $("#nombrePais").val($(this).text());
            
        });
     	//Select one Region
     	$("#idRegion option:selected").each(function (){
            $("#idCiudad").val($(this).val());
            $("#nameCiudad").val($(this).text());
        });
                    
        $("#accion").val("1");
        
        $("#iddRegion").val(idCiudad); //Recupero el id de la ciudad
        
        $("#iddRegion").val(idCiudad);
        $("#iddLocalidad").val(idLocalidad);
       
        $("#idRegion").val(idCiudad).prop('disabled', true);
        $("#idCountry").val(idPais).prop('disabled', true);
        
        $("#idRegion").val(idCiudad);
        $("#idCountry").val(idPais);
        
        $("#nombre").val(nombre);
        $("#sigla").val(sigla);
        $("#zona").val(zona);
        $("#dialog:ui-dialog" ).dialog( "destroy" );
        $("#dialogo").dialog("open");
        $("#nombre").focus();
       
    }
         
    // cambio de pais
    $("#idPais").change(function(){
    	$("#idPais option:selected").each(function (){
        	$("#idPais option:selected").each(function (){
            	idPais = $(this).val();
                nombre = $(this).text();
                $.ajax({
                	url: "generalAdministrationSelectCountry",
                    type: "GET",
                    data:{idCountry:idPais,name:nombre},
                    success:function(res){                               	
                    	location.href = "adminLocality?_menuId=2&_subMenuId=2&_optionId=3&idCountry="+res;
                    },
                    error: function(res){ alert("Error! al cambiar de PAIS."); }
                 });
              });
          });
      });
    //permit only text
	$('.lettersOnly').keyup(function () {
         if (this.value != this.value.replace(/[^A-Za-z\s]/g, '')) {
            this.value = this.value.replace(/[^A-Za-z\s]/g, '');
         }
     });
    
  });
 
  // boton Eliminar
  $.fn.eliminar = function(idPais, IdLocalidad,name){
	  if(confirm("¿Esta seguro de eliminar la localidad ''"+name+"''?")){
	     $.ajax({
	     	url: "generalAdministrationRemoveLocality",
	        type: "GET",
	        data:{regionId:idPais,localityId:IdLocalidad, name:name},
	        success:function(res){
	           location.href = "adminLocality?_menuId=2&_subMenuId=2&_optionId=3";
	     },
	     error: function(res){ alert("Error! al eliminar la localidad."); }
	   });
	 }
  }
        
  function mostrarLista(res){
  	location.href = "adminLocality?_menuId=2&_subMenuId=2&_optionId=2&idCountry="+res;
  }
            
  // muestra oculta
  function mostrarOcultar(){
  	if(document.getElementById("localitiesBaja").style.display == 'none'){
    	document.getElementById("localitiesBaja").style.display = 'block';

    }else{
        document.getElementById("localitiesBaja").style.display = 'none';
    }
}
            
</script>
</head>

<body>
<div id="top-wrap">
	<%@include file="../../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                	<li><a href="mainFront?v=1">Home</a></li>
                    <li><span style="color:#666">Administraci&oacute;n</span></li>
                    <li><span style="color:#666">Administraci&oacute;n General</span></li>
                    <li class="current-page"><span class="end"><span class="middle">Administraci&oacute;n de Localidad</span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                
                <div class="izq">
						<%@include file="../../../bodyIzq.jsp" %>
                </div>
                
                <div class="medio" style="border: 0px solid">
                   <center>
                   <h2 class="decorado">Lista de Localidades</h2></br></br> 
                   
                   <table class="miReporte" style="width: 95%">
	                   <tr>
	                        <td style="text-align: right"><input type="button" class="boton" value="Anadir Nueva Localidad" onclick="$.fn.addLocality()"/></td>
	                   </tr>
	               </table>
	               <table class="tabla_decorado" style="width: 95%">
	                   <thead>
	                         <tr>
	                              <th width="3%" class="th_decoradoRowspan">Nº</th>
	                              <th width="15%" class="th_decoradoRowspan">NOMBRE DEL PAIS</th>
	                              <th width="15%" class="th_decoradoRowspan">NOMBRE DE LA CIUDAD</th>
	                              <th width="15%" class="th_decoradoRowspan">NOMBRE LOCALIDAD</th>
	                              <th width="15%" class="th_decoradoRowspan">SIGLA</th>
	                              <th width="15%" class="th_decoradoRowspan">AREA</th>
	                              <th width="15%" class="th_decoradoRowspan">ACCION</th>
	                         </tr>
	                   </thead>
	                   <tbody>
                  	    	<c:set var="i" value="1"/>
							<c:forEach var="item" items="${localidades}">
						       <tr class="tr_decorado">
	                               <td class="th_decorado" style="text-align: center">${i}</td>
	                               <td class="th_decorado">${item.getRegion().getCountryId().getName()} </td>
	                               <td class="th_decorado">${item.getRegion().getName()}</td>
	                               <td class="th_decorado">${item.name}</td>	
	                               <td class="th_decorado">${item.initials}</td>
	                               <td class="th_decorado">${item.area}</td>
	                               <td class="td_decoradoDerecha" style="text-align: center">
	                                    <input type="button" value="Editar" onclick="$.fn.editar(${item.getRegion().getCountryId().getCountryId()},${item.getRegion().getRegionId()}, ${item.getLocalityPK().getLocalityId()},'${item.name}','${item.initials}','${item.area}')" class="botonRep" title="Pulsa aqui para editar la localidad"/>
	                                    
	                                    <input type="button" value="Eliminar" onClick="$.fn.eliminar(${item.getRegion().getRegionId()},${item.getLocalityPK().getLocalityId()},'${item.name}')" class="botonRep" title="Pulsa aqui para eliminar el País"/>
	                               </td>
	                            </tr>
	                            <c:set var="i" value="${i+1}"/>
					    	</c:forEach>
                     	</tbody>
	                 </table>
	                 
	                 <div id="dialogo"><br/>
                        <h2 class="decorado" id="titleForm"></h2><br/>
                        <form id="formLocality" method="POST">
                         	<input type="hidden" name="accion" id="accion" value="0" />
                            <!-- input type="hidden" name="idLocalidad" id="idLocalidad" value="0" /-->
                            <input type="hidden" name="iddRegion" id="iddRegion"/>
                            <input type="hidden" name="iddLocalidad" id="iddLocalidad"/>
							<div style="clear:both;">
                                <label class="form_align35" for="idCountry">Pais : </label>
		                        <select name="idCountry" id="idCountry" class="required form_input_align" title="Seleccione el Pais">
									<option value=""><fmt:message key="form.selected"/></option>
										<c:forEach var="item" items="${paices}">
											<option value="${item.countryId}">${item.name}</option>
										</c:forEach>
								</select>
								<label class="error">*</label>
                            </div>
                            
                            <div style="clear:both;">
                                <label class="form_align35" for="idRegion">Ciudad : </label>
                                <select name="idRegion" id="idRegion"  class="required form_input_align" title="Seleccione una Ciudad">
									<option value=""><fmt:message key="form.selected"/></option>
													
										<c:forEach var="item" items="${ciudades}">
											<option value="${item.regionId}">${item.name}</option>
										</c:forEach>
										
								</select>
                                <label class="error">*</label>
                                </select>
                            </div>
                            <div style="clear:both;">
                                 <label class="form_align35" >Nombre : </label>
                                 <input type="text" name="nombre" id="nombre" value="" class="required form_input_align lettersOnly" title="Ingrese Nombre Locality" maxlength="40" placeholder="letras"/>
                                 <label class="error">*</label>
                            </div>
                            <div style="clear:both;">
                                 <label class="form_align35" >Sigla : </label>
                                 <input type="text" name="sigla" id="sigla" value="" class="form_input_align lettersOnly" title="Ingrese Sigla Locality" maxlength="5" placeholder="letras"/>
                            </div>
                            <div style="clear:both;">
                                 <label class="form_align35" >Zona : </label>
                                 <input type="text" name="zona" id="zona" value="" class="form_input_align lettersOnly" title="Ingrese Zona Locality" maxlength="20" placeholder="letras"/>
                            </div>
                         </form>
                       </div> <!-- FIN DIV id="dialogo" -->
	                 </center>                         
                </div>

            </div><!--end of leftPan-->
             <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!--end main content -->
	</div>
</div>
</body>
</html>
